<div nz-row>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px;">
      <nz-card-meta [nzAvatar]="avatarTemplate1" [nzTitle]="data.bjtj.allalert" nzDescription="当前卡控报警">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate1>
      <nz-avatar nzIcon="alert" [nzShape]="'square'" style="background: #2cce4b;" class="kkbj-titleinfo"></nz-avatar>
      <!-- <i nz-icon nzType="alert" nzTheme="outline" style="background: #2cce4b;"></i> -->
    </ng-template>
  </div>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px">
      <nz-card-meta [nzAvatar]="avatarTemplate2" [nzTitle]="data.bjtj.ckalert" nzDescription="已审核">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate2>
      <!-- <i nz-icon nzType="audit" nzTheme="outline"></i> -->
      <nz-avatar nzIcon="audit" [nzShape]="'square'" style="background: #24cecd;" class="kkbj-titleinfo"></nz-avatar>
    </ng-template>
  </div>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px">
      <nz-card-meta [nzAvatar]="avatarTemplate3" [nzTitle]="data.bjtj.allalert-data.bjtj.ckalert" nzDescription="未审核">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate3>
      <!-- <i nz-icon nzType="file-search" nzTheme="outline"></i> -->
      <nz-avatar nzIcon="file-search" [nzShape]="'square'" style="background: #ef4d4c;" class="kkbj-titleinfo">
      </nz-avatar>
    </ng-template>
  </div>
</div>

<div *ngIf="isMainPage; else detailPage" style="background-color:white;padding: 20px;">
  <!-- 主页面 -->
  <div nz-row style="background-color:white;padding: 20px;">
    <div nz-col nzSpan="24">
      <form nz-form [formGroup]="validateForm">
        <div nz-row>
          <div nz-col [nzSpan]="8" class="kkbj-form-flex">
            <nz-form-item nzFlex class="kkbj-form-item">
              <nz-form-label>部门</nz-form-label>
              <nz-form-control>
                <!-- <input [formControlName]="data.ctrlNames.bm" nz-input placeholder="请选择" /> -->
                <nz-tree-select [formControlName]="data.ctrlNames.bm" style="width: 150px" [nzNodes]="data.nodes"
                  nzShowSearch (nzTreeClick)="nzTreeClick($event)" nzPlaceHolder="请选择" nzDropdownMatchSelectWidth=false
                  [nzDropdownStyle]="{height:'500px'}">
                </nz-tree-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8" class="kkbj-form-flex">
            <nz-form-item nzFlex class="kkbj-form-item">
              <nz-form-label>种类</nz-form-label>
              <nz-form-control>
                <nz-select [formControlName]="data.ctrlNames.zl" [(ngModel)]="data.cmpData.zl" style="width: 120px;"
                  nzAllowClear nzPlaceHolder="请选择">
                  <nz-option *ngFor="let item of data.zl" [nzValue]="item.equistyleid" [nzLabel]="item.equistylename">
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8" class="kkbj-form-flex">
            <nz-form-item nzFlex class="kkbj-form-item">
              <nz-form-label>类别</nz-form-label>
              <nz-form-control>
                <nz-select [formControlName]="data.ctrlNames.lb" style="width: 120px;" [(ngModel)]="data.cmpData.lb"
                  nzAllowClear nzPlaceHolder="请选择">
                  <nz-option *ngFor="let item of data.lb" [nzValue]="item.equisortid" [nzLabel]="item.equisortname">
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
        <div nz-row>
          <div nz-col [nzSpan]="8" class="kkbj-form-flex">
            <nz-form-item nzFlex class="kkbj-form-item">
              <nz-form-label>状态</nz-form-label>
              <nz-form-control>
                <nz-select [formControlName]="data.ctrlNames.zt" style="width: 120px;" [(ngModel)]="data.cmpData.zt"
                  nzAllowClear nzPlaceHolder="请选择">
                  <nz-option nzValue="" nzLabel="全部"></nz-option>
                  <nz-option nzValue="正常" nzLabel="正常"></nz-option>
                  <nz-option nzValue="遗失" nzLabel="遗失"></nz-option>
                  <nz-option nzValue="损坏" nzLabel="损坏"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8" class="kkbj-form-flex">
            <nz-form-item nzFlex class="kkbj-form-item">
              <nz-form-label>下道时间起</nz-form-label>
              <nz-form-control>
                <nz-date-picker [formControlName]="data.ctrlNames.sjStart"></nz-date-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8" class="kkbj-form-flex">
            <nz-form-item nzFlex class="kkbj-form-item">
              <nz-form-label>下道时间止</nz-form-label>
              <nz-form-control>
                <nz-date-picker [formControlName]="data.ctrlNames.sjEnd"></nz-date-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
        <div nz-row>
          <div nz-col [nzSpan]="24" style="text-align: right;">
            <button nz-button [nzType]="'primary'" (click)="query($event)">查询</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div nz-row style="background-color:white;padding: 20px;">
    <div nz-col nzSpan="24">
      <nz-table #basicTable [nzScroll]="lockHeadScroll" [nzData]="data.tableData" [nzFrontPagination]="false"
        [nzTotal]="data.tableTotal" [(nzPageSize)]="data.tablePagination.rows" nzShowSizeChanger
        [nzShowPagination]="true" [(nzPageIndex)]="data.tablePagination.page" (nzPageIndexChange)="nzPageIndexChange()"
        (nzPageSizeChange)="setPageSize()" nzSize="small" nzBordered [nzShowTotal]="totalTemplate">
        <ng-template #totalTemplate let-total> 总共 {{ data.tableTotal }} 条数据 </ng-template>
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="10%">编号</th>
            <th nzAlign="center" nzWidth="15%">RFID编号</th>
            <th nzAlign="center" nzWidth="15%">型号</th>
            <th nzAlign="center" nzWidth="15%">种类</th>
            <th nzAlign="center" nzWidth="15%">类别</th>
            <th nzAlign="center">部门名称</th>
            <th nzAlign="center" nzWidth="15%">状态</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data;let i = index" (dblclick)="changePage(i)" nz-tooltip
            nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom" style="cursor:pointer">
            <td>{{ data.equipmentid }}</td>
            <td>{{ data.AssetsID }}</td>
            <td nzAlign="center">{{ data.EquiModel }}</td>
            <td>{{ data.EquiStyleName }}</td>
            <td>{{ data.EquiSortName }}</td>
            <td nzAlign="center">{{ data.DepartmentName }}</td>
            <td nzAlign="center">{{ data.Status }}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>


<!-- 详情页面 -->
<ng-template #detailPage>
  <div style="background-color:white;padding: 20px;">

    <div nz-row>
      <div nz-col nzSpan="24" style="display:flex;justify-content: space-between;">
        <span class="sxdgl-detail-tabletitle">工具统计-详情查看</span>
        <button nz-button [nzType]="'primary'" (click)="changePage()">返回</button>
      </div>
    </div>


    <div nz-row>
      <table *ngFor="let _data of [data.detailInfo.data]" class="sxdgl-detail-maintable">
        <tr>
          <td class="sxdgl-detail-lable">使用部门：</td>
          <td colspan="3" class="sxdgl-detail-value">{{_data.DepartmentName }}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">种类：</td>
          <td class="sxdgl-detail-value">{{_data.EquiStyleName}}</td>
          <td class="sxdgl-detail-lable">类别名称:</td>
          <td class="sxdgl-detail-value">{{_data.EquiSortName}}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">型号：</td>
          <td class="sxdgl-detail-value">{{_data.EquiModel}}</td>
          <td class="sxdgl-detail-lable">状态：</td>
          <td class="sxdgl-detail-value">{{ _data.Status}}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">使用人：</td>
          <td colspan="3" class="sxdgl-detail-value">{{_data.useperson }}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">生产厂家：</td>
          <td class="sxdgl-detail-value">{{ _data.factory}}</td>
          <td class="sxdgl-detail-lable">出厂日期：</td>
          <td class="sxdgl-detail-value">{{ _data.leavefactorydate}}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">采购时间：</td>
          <td class="sxdgl-detail-value">{{ _data._stockdate}}</td>
          <td class="sxdgl-detail-lable">起用时间：</td>
          <td class="sxdgl-detail-value">{{ _data._usedate}}</td>
        </tr>
        <tr>
          <td class="sxdgl-detail-lable">备注</td>
          <td colspan="3" class="sxdgl-detail-value">{{ _data.remark }}</td>
        </tr>
      </table>
    </div>


  </div>

</ng-template>